<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑地址关联 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        /* 添加横向布局样式 */
        .systems-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .systems-container .form-section {
            flex: 1;
            min-width: 300px;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .systems-container .form-section {
                flex: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>编辑地址关联</h1>
                <p class="subtitle">修改住建局、供热系统和燃气系统之间的地址关联关系</p>
            </div>
            <button class="btn btn-default" onclick="navigateTo('address-relation.html', '关联管理')">
                <i class="fas fa-arrow-left"></i> 返回关联管理
            </button>
        </header>
        
        <div class="create-form">
            <div class="form-section">
                <h3 class="section-title">编辑地址关联关系 <span id="currentRelationId" class="highlight-text">R20231201001</span></h3>
                <p class="section-desc">在此页面您可以修改现有的关联关系或添加新的关联地址。</p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <span>修改关联关系不会影响原有的地址数据，只会更改系统之间的关联映射关系。</span>
                </div>
            </div>
            
            <!-- 三个系统并排显示 -->
            <div class="systems-container">
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="fas fa-building"></i> 住建局系统地址
                    </h4>
                    <div class="system-card">
                        <div class="system-header">
                            <div class="system-name">
                                <i class="fas fa-building"></i> 当前关联的住建局地址
                            </div>
                            <span class="system-badge badge-construction">住建</span>
                        </div>
                        <div class="system-body">
                            <div class="address-field">
                                <div class="field-label">地址ID</div>
                                <div class="field-value">JZ10023456</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">省市区</div>
                                <div class="field-value">山东省 济南市 历下区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">街道社区</div>
                                <div class="field-value">解放路街道 文化东路社区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">小区</div>
                                <div class="field-value">文东花园A区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼栋单元</div>
                                <div class="field-value">8号楼 2单元</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼层门牌</div>
                                <div class="field-value">15层 1502室</div>
                            </div>
                            
                            <div class="complete-address">
                                山东省济南市历下区解放路街道文化东路社区文东花园A区8号楼2单元15层1502室
                            </div>
                            
                            <div class="form-buttons" style="justify-content: flex-start; margin-top: 10px;">
                                <button class="btn btn-default" onclick="showChangeAddressForm('construction')">
                                    <i class="fas fa-sync-alt"></i> 更换地址
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="changeConstructionForm" class="change-address-form" style="display: none;">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">搜索新地址</label>
                                <div class="input-with-button">
                                    <input type="text" class="form-control" placeholder="输入地址ID或关键字搜索" id="newConstructionSearchInput">
                                    <button class="input-btn" onclick="searchNewConstructionAddress()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="search-results-container">
                            <div class="search-results-header">搜索结果</div>
                            <div class="search-results-body">
                                <table class="results-table">
                                    <thead>
                                        <tr>
                                            <th width="40px">选择</th>
                                            <th>地址</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="radio" name="newConstructionAddress" value="101"></td>
                                            <td>山东省济南市市中区经七路街道泉城社区泉城小区12栋3单元8楼802号</td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="newConstructionAddress" value="102"></td>
                                            <td>山东省济南市历下区解放路街道文化东路社区文东花园5号楼2单元11层1102室</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <button class="btn btn-default" onclick="cancelChangeAddress('construction')">取消</button>
                            <button class="btn btn-primary" onclick="confirmChangeAddress('construction')">确认更换</button>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="fas fa-fire"></i> 供热系统地址
                    </h4>
                    <div class="system-card">
                        <div class="system-header">
                            <div class="system-name">
                                <i class="fas fa-fire"></i> 当前关联的供热系统地址
                            </div>
                            <span class="system-badge badge-heating">供热</span>
                        </div>
                        <div class="system-body">
                            <div class="address-field">
                                <div class="field-label">地址ID</div>
                                <div class="field-value">GR20058932</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">省市区</div>
                                <div class="field-value">山东省 济南市 历下区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">街道社区</div>
                                <div class="field-value">解放路街道 文化东路社区居委会</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">小区</div>
                                <div class="field-value">文东花园一区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼栋单元</div>
                                <div class="field-value">8栋 2单元</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼层门牌</div>
                                <div class="field-value">15楼 1502</div>
                            </div>
                            
                            <div class="complete-address">
                                山东省济南市历下区解放路街道文化东路社区居委会文东花园一区8栋2单元15楼1502
                            </div>
                            
                            <div class="form-buttons" style="justify-content: flex-start; margin-top: 10px;">
                                <button class="btn btn-default" onclick="showChangeAddressForm('heating')">
                                    <i class="fas fa-sync-alt"></i> 更换地址
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="changeHeatingForm" class="change-address-form" style="display: none;">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">搜索新地址</label>
                                <div class="input-with-button">
                                    <input type="text" class="form-control" placeholder="输入地址ID或关键字搜索" id="newHeatingSearchInput">
                                    <button class="input-btn" onclick="searchNewHeatingAddress()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="search-results-container">
                            <div class="search-results-header">搜索结果</div>
                            <div class="search-results-body">
                                <table class="results-table">
                                    <thead>
                                        <tr>
                                            <th width="40px">选择</th>
                                            <th>地址</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="radio" name="newHeatingAddress" value="201"></td>
                                            <td>山东省济南市市中区经七路街道泉城小区12号楼3单元8层802室</td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="newHeatingAddress" value="202"></td>
                                            <td>山东省济南市历下区解放路街道文东花园5栋2单元11楼1102</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <button class="btn btn-default" onclick="cancelChangeAddress('heating')">取消</button>
                            <button class="btn btn-primary" onclick="confirmChangeAddress('heating')">确认更换</button>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="fas fa-burn"></i> 燃气系统地址
                    </h4>
                    <div class="system-card">
                        <div class="system-header">
                            <div class="system-name">
                                <i class="fas fa-burn"></i> 当前关联的燃气系统地址
                            </div>
                            <span class="system-badge badge-gas">燃气</span>
                        </div>
                        <div class="system-body">
                            <div class="address-field">
                                <div class="field-label">地址ID</div>
                                <div class="field-value">RQ30076521</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">省市区</div>
                                <div class="field-value">山东省 济南市 历下区</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">街道社区</div>
                                <div class="field-value">解放路街道 文化东路社区委员会</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">小区</div>
                                <div class="field-value">文东花园</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼栋单元</div>
                                <div class="field-value">8号楼 2单元</div>
                            </div>
                            <div class="address-field">
                                <div class="field-label">楼层门牌</div>
                                <div class="field-value">十五层 1502号</div>
                            </div>
                            
                            <div class="complete-address">
                                山东省济南市历下区解放路街道文化东路社区委员会文东花园8号楼2单元十五层1502号
                            </div>
                            
                            <div class="form-buttons" style="justify-content: flex-start; margin-top: 10px;">
                                <button class="btn btn-default" onclick="showChangeAddressForm('gas')">
                                    <i class="fas fa-sync-alt"></i> 更换地址
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="changeGasForm" class="change-address-form" style="display: none;">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">搜索新地址</label>
                                <div class="input-with-button">
                                    <input type="text" class="form-control" placeholder="输入地址ID或关键字搜索" id="newGasSearchInput">
                                    <button class="input-btn" onclick="searchNewGasAddress()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="search-results-container">
                            <div class="search-results-header">搜索结果</div>
                            <div class="search-results-body">
                                <table class="results-table">
                                    <thead>
                                        <tr>
                                            <th width="40px">选择</th>
                                            <th>地址</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="radio" name="newGasAddress" value="301"></td>
                                            <td>山东省济南市市中区经七路街道泉城社区泉城小区12号楼3单元8楼802号</td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="newGasAddress" value="302"></td>
                                            <td>山东省济南市历下区解放路街道文化东路社区文东花园5号楼2单元11层1102号</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <button class="btn btn-default" onclick="cancelChangeAddress('gas')">取消</button>
                            <button class="btn btn-primary" onclick="confirmChangeAddress('gas')">确认更换</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-section">
                <h4 class="section-title">
                    <i class="fas fa-cogs"></i> 关联设置
                </h4>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">关联说明</label>
                        <textarea class="form-control" rows="3" placeholder="输入关联说明信息" id="relationDescription">三个系统中同一住户的地址数据，根据街道信息确认匹配。</textarea>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">关联状态</label>
                        <select class="form-control" id="relationStatus">
                            <option value="active" selected>已确认</option>
                            <option value="pending">待确认</option>
                            <option value="review">需要审核</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="form-buttons">
                <button class="btn btn-default" onclick="navigateTo('address-relation.html', '关联管理')">取消</button>
                <button class="btn btn-primary" onclick="saveRelationChanges()">
                    <i class="fas fa-save"></i> 保存修改
                </button>
            </div>
        </div>
    </div>
    
    <!-- 成功提示模态框 -->
    <div class="modal" id="successModal">
        <div class="modal-content">
            <div class="modal-header">
                <h4>修改成功</h4>
                <span class="close" onclick="closeModal('successModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <p>地址关联关系修改成功！</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="navigateTo('address-relation.html', '关联管理')">返回关联管理</button>
                <button class="btn btn-default" onclick="navigateTo('address-detail.html?id=1&relation=R20231201001', '地址详情')">查看详情</button>
            </div>
        </div>
    </div>

    <script src="relation-scripts.js"></script>
    <script>
        // 页面加载时，从URL参数获取关联ID
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const relationId = urlParams.get('id') || 'R20231201001';
            
            // 设置当前关联ID
            document.getElementById('currentRelationId').textContent = relationId;
            
            // 实际项目中，这里应该根据关联ID加载数据
            loadRelationData(relationId);
        });
        
        // 加载关联数据
        function loadRelationData(relationId) {
            console.log(`加载关联ID: ${relationId} 的数据`);
            // 实际项目中，这里应该是异步请求服务器数据
        }
        
        // 显示更换地址表单
        function showChangeAddressForm(system) {
            document.getElementById(`change${system.charAt(0).toUpperCase() + system.slice(1)}Form`).style.display = 'block';
        }
        
        // 取消更换地址
        function cancelChangeAddress(system) {
            document.getElementById(`change${system.charAt(0).toUpperCase() + system.slice(1)}Form`).style.display = 'none';
        }
        
        // 确认更换地址
        function confirmChangeAddress(system) {
            const systemName = {
                'construction': '住建局',
                'heating': '供热系统',
                'gas': '燃气系统'
            }[system];
            
            const selectedAddressId = document.querySelector(`input[name="new${system.charAt(0).toUpperCase() + system.slice(1)}Address"]:checked`)?.value;
            
            if (!selectedAddressId) {
                alert(`请选择一个新的${systemName}地址`);
                return;
            }
            
            console.log(`更换${systemName}地址为: ${selectedAddressId}`);
            
            // 实际项目中，这里应该是异步请求服务器更新数据
            // 这里仅作为示例
            setTimeout(() => {
                cancelChangeAddress(system);
                alert(`${systemName}地址已更换成功`);
            }, 500);
        }
        
        // 搜索新的住建局地址
        function searchNewConstructionAddress() {
            const keyword = document.getElementById('newConstructionSearchInput').value.trim();
            console.log(`搜索新的住建局地址: ${keyword}`);
            // 实际项目中应该发起API请求搜索数据
        }
        
        // 搜索新的供热系统地址
        function searchNewHeatingAddress() {
            const keyword = document.getElementById('newHeatingSearchInput').value.trim();
            console.log(`搜索新的供热系统地址: ${keyword}`);
            // 实际项目中应该发起API请求搜索数据
        }
        
        // 搜索新的燃气系统地址
        function searchNewGasAddress() {
            const keyword = document.getElementById('newGasSearchInput').value.trim();
            console.log(`搜索新的燃气系统地址: ${keyword}`);
            // 实际项目中应该发起API请求搜索数据
        }
        
        // 保存关联修改
        function saveRelationChanges() {
            const relationId = document.getElementById('currentRelationId').textContent;
            const description = document.getElementById('relationDescription').value;
            const status = document.getElementById('relationStatus').value;
            
            console.log('保存关联修改:', {
                relationId,
                description,
                status
            });
            
            // 实际项目中应该发起API请求保存数据
            // 这里仅作为示例
            setTimeout(() => {
                showModal('successModal');
            }, 500);
        }
    </script>
</body>
</html> 